@import "../../../../../shared/color";

.order-buttons {
	width: 100%;
	text-align: right;
	padding-top: 20px;
	
	button {
		margin: 0px 4px;
	}
}

.order-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
	width: 100%;
	padding-bottom: 30px;
	
	.ali-pay {
		border-bottom: 1px solid #eaeaea;
		border-top: 1px solid #eaeaea;
		padding-top: 10px;
		margin-top: 20px;
		
		& > iframe {
			width: 1040px;
			height: 860px;
			border: none;
			margin-top: 20px;
		}
	}
}

.order-info-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px 10px;
	font-size: 14px;
	width: 100%;
	
	.info-box {
		width: 100%;
		
		table {
			width: 100%;
		}
	}
	
	.count-down {
		color: @primary-color;
	}
	
	.order-status {
		margin-bottom: 10px;
	}
	
	.order-buttons {
		padding-top: 40px;
		text-align: center;
	}
	
	button {
		margin: 2px 0px 2px 0;
	}
	
	label {
		font-weight: bold;
		text-align: right;
	}
	
	.receiver-info {
		display: inline-block;
		
		& > b {
			color: #000000;
		}
		
		& > * {
			padding-right: 10px;
		}
	}
	
	
	.file-box {
		margin-bottom: 20px;
		margin-top: 20px;
	}
	
	
	table {
		tr {
			td {
				padding: 10px 2px;
				text-align: left;
				color: #9a9a9a;
				font-size: 14px;
				
				& > label {
					color: #000000;
					color: #000000;
					margin: 0 40px 8px 0;
					min-width: 100px;
					display: inline-flex;
				}
			}
			
			.order-fee {
				width: 100%;
				display: flex;
				color: #000000;
				
				&.item {
					span {
						color: @text-color-darken;
						font-size: 14px;
						
						span {
							font-weight: bold;
						}
					}
					
					b {
						color: @primary-color;
					}
				}
				
				span {
					font-size: 12px;
					color: #9c9c9c;
				}
				
				& > label {
					flex-grow: 1;
					text-align: left;
				}
				
				& > div {
					font-size: 20px;
					min-width: 100px;
					text-align: right;
				}
			}
		}
	}
}


.qr-image-box {
	margin: 10px 20px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	
	img {
		height: 300px;
		width: 300px;
	}
}

.qr-tips {
	text-align: center;
	font-size: 14px;
	
	& > b {
		color: @primary-color;
		font-size: 18px;
		margin: 0 8px;
	}
	
	&.normal > b {
		font-size: 14px;
	}
}


h2.pay-type-chooser {
	margin-top: 40px;
	text-align: center;
}

.pay-type-radio.ant-radio-group {
	display: flex;
	justify-content: center;
	padding: 30px 0px;
	
	.ant-radio-wrapper {
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
		border: 1px solid #e8e8e8;
		border-radius: 4px;
		color: @text-color-lighten;
		padding: 8px;
		width: 140px;
		height: 140px;
		
		.anticon{
			font-size: 60px;
		}
		
		&.wx {
			//border-color: #00a947;
			//color: #00a947;
			
			&.ant-radio-wrapper-checked {
				background-color: #00a947;
				color: #ffffff;
			}
			
			margin-right: 30px;
		}
		
		&.ali {
			//border-color: @primary-color;
			//color: @primary-color;
			
			&.ant-radio-wrapper-checked {
				background-color: @primary-color;
				color: #ffffff;
			}
		}
		
		.ant-radio {
			display: none;
		}
		
		i {
			font-size: 50px;
		}
		
		div {
			text-align: center;
		}
	}
}
